<template>
	<view class="container">
		<!-- 顶部导航 - 添加fixed类 -->
		 <view class="header fixed">
			<view class="logo">
				 <u-image src="/static/logo.png" width="277rpx" height="80rpx" mode="aspectFit"></u-image>
			</view>
		</view>
		
		<!-- 占位元素，防止内容被fixed导航遮挡 -->
		<view class="header-placeholder"></view>
		<view class="content">
		
		<!-- 产品库模块 -->
		<view class="product-section" >
			<view class="section-title product-title">
				<u-image src="/static/chanpin.png" width="224" height="47"></u-image>
				<u-image src="/static/xiangxia.png" width="35" height="28"></u-image>
			</view>
			<view class="product-list">
				<view class="product-item" v-for="(item, index) in productList" :key="index" @click="handleViewMore(item)">
					
					<u-image 
						:src="item.image" 
						width="190rpx" 
						height="190rpx" class="product-image"
						mode="aspectFill"
					></u-image>
					<view class="product-info">
						<view class="product-name">{{item.title}}</view>
						<view class="product-price">{{item.ext_price}}</view>
					</view>
					
				</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
import {
		 postToken
	} from "@/api/index.js";

export default {
	data() {
		return {
			
			
			// 新增导航数据
			navItems: ['爆品', '药贴', '乳膏', '水剂'],
			currentNav: 0,
			// 添加页面路径映射
			navRoutes: {
				'爆品': '/pages/index/index',
				'药贴': '/pages/yaotie/index',
				'乳膏': '/pages/rugao/index',
				'水剂': '/pages/shuiji/index',
				// '首页': '/pages/index/index'
			},
			// 品牌列表数据
			brandList: [],
			website:'http://www.bai.sh',
			productList: [
				{
					image: '/static/temp01.jpg',
					name: '手足愈美霜',
					price: '3.2'
				},
				{
					image: '/static/product1.jpg',
					name: '手足愈美霜',
					price: '3.2'
				},
				{
					image: '/static/product1.jpg',
					name: '手足愈美霜',
					price: '3.2'
				},
				// ... 更多产品数据
			]
			
		};
	},
	mounted() {
		
		this.getProductList()
	},
	methods: {
		
		getProductList () {
			// 使用uni.$u.http直接发起请求测试
			uni.$u.http.get('/list/5/page/1').then(res => {
				console.log('/list/5/page/1', res)
				let data = res.data
				data.forEach(item => {
					item.image = this.website+item.ico
				})
				this.productList = data
				
			}).catch(err => {
				console.log('失败', err)
			})
		},
		handleNavClick(index, item) {
			this.currentNav = index;
			// 获取对应路由
			const route = this.navRoutes[item];
			if (route) {
				uni.navigateTo({
					url: route,
					fail: (err) => {
						// 如果页面已经在栈中，使用switchTab
							uni.switchTab({
								url: route
							});
					}
				});
			}
		},
		handleViewMore(item) {
			// 跳转到更多商品页面
			uni.navigateTo({
				url: '/pages/detail/index?id='+item.id
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
}

.header {
	padding: 20rpx 30rpx;
	background-color: #fff;
	width: 100%;
	box-sizing: border-box;
	
	
	&.fixed {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.logo {
		display: flex;
		margin-bottom: 20rpx;
	flex-direction: column;
		
		text {
			margin-left: 10rpx;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
	
	.nav {
		display: flex; margin-top: 20rpx;;
		justify-content: space-around;
		
		.nav-item {
			padding: 10rpx 20rpx;
			font-size: 28rpx;
			
			&.active {
				color: #5677fc;font-weight: bold;
			}
		}
	}
}

// 添加占位元素样式
.header-placeholder {
	height: 90rpx; // 根据header实际高度调整
	width: 100%;
}

.content {
	padding: 30rpx;
	background: #eee;
}
.product-title{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
.product-section {
	padding:10rpx;
	// background: #fff;
	margin-top: 50rpx;
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	
	.section-desc {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 20rpx;
	}
	
	.product-list {
		display: flex;
		flex-wrap: wrap;
		margin: 30rpx -10rpx;
		justify-content: space-between;
		flex-direction: row;
		
		.product-item {
			width: 32%;
			padding: 20rpx 10rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			background: #fff;
			margin-bottom: 30rpx;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
			.product-info {
				padding: 10rpx 0;
				
				.product-name {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 6rpx;
				}
				
				.product-price {
					font-size: 32rpx;
					color: #ff6b81;
					font-weight: bold;
					
					&::before {
						content: '¥';
						font-size: 24rpx;
						margin-right: 4rpx;
					}
				}
			}
		}
	}
}
</style>
